<template>
  <div class="procurement-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>采购管理</h3>
          <div class="header-actions">
            <el-button type="primary" @click="createPurchase">
              <el-icon><Plus /></el-icon>
              新建采购
            </el-button>
            <el-button type="success" @click="batchImport">
              <el-icon><Upload /></el-icon>
              批量导入
            </el-button>
          </div>
        </div>
      </template>

      <!-- 筛选条件 -->
      <div class="filter-bar">
        <el-form :model="filterForm" inline>
          <el-form-item label="采购单号">
            <el-input v-model="filterForm.orderNo" placeholder="请输入采购单号" clearable />
          </el-form-item>
          <el-form-item label="供应商">
            <el-select v-model="filterForm.supplier" placeholder="选择供应商" clearable>
              <el-option label="供应商A" value="A" />
              <el-option label="供应商B" value="B" />
              <el-option label="供应商C" value="C" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filterForm.status" placeholder="选择状态" clearable>
              <el-option label="待确认" value="pending" />
              <el-option label="已确认" value="confirmed" />
              <el-option label="生产中" value="producing" />
              <el-option label="已发货" value="shipped" />
              <el-option label="已完成" value="completed" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 采购订单列表 -->
      <el-table :data="purchaseList" border stripe v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNo" label="采购单号" width="150" />
        <el-table-column prop="supplierName" label="供应商" width="150" />
        <el-table-column prop="productCount" label="商品数量" width="100" align="center" />
        <el-table-column prop="totalAmount" label="采购金额" width="150" align="right">
          <template #default="{ row }">
            ¥{{ formatNumber(row.totalAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="下单日期" width="120" />
        <el-table-column prop="expectedDate" label="预计到货" width="120" />
        <el-table-column prop="progress" label="进度" width="150">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" :stroke-width="8" />
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="采购员" width="100" />
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" link @click="viewDetail(row)">
              详情
            </el-button>
            <el-button type="success" size="small" link @click="confirmOrder(row)" v-if="row.status === 'pending'">
              确认
            </el-button>
            <el-button type="warning" size="small" link @click="trackOrder(row)">
              跟踪
            </el-button>
            <el-button type="info" size="small" link @click="printOrder(row)">
              打印
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 筛选表单
const filterForm = reactive({
  orderNo: '',
  supplier: '',
  status: ''
})

// 表格数据
const loading = ref(false)
const purchaseList = ref([
  {
    id: 1,
    orderNo: 'PO202401001',
    supplierName: '供应商A',
    productCount: 25,
    totalAmount: 158000,
    status: 'shipped',
    orderDate: '2024-01-10',
    expectedDate: '2024-01-20',
    progress: 85,
    creator: '张三'
  },
  {
    id: 2,
    orderNo: 'PO202401002',
    supplierName: '供应商B',
    productCount: 35,
    totalAmount: 230000,
    status: 'producing',
    orderDate: '2024-01-12',
    expectedDate: '2024-01-25',
    progress: 45,
    creator: '李四'
  },
  {
    id: 3,
    orderNo: 'PO202401003',
    supplierName: '供应商C',
    productCount: 15,
    totalAmount: 95000,
    status: 'pending',
    orderDate: '2024-01-15',
    expectedDate: '2024-01-28',
    progress: 0,
    creator: '王五'
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(3)

// 方法
const formatNumber = (value) => {
  return value.toLocaleString()
}

const getStatusType = (status) => {
  const map = {
    pending: 'info',
    confirmed: 'primary',
    producing: 'warning',
    shipped: 'success',
    completed: 'success'
  }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = {
    pending: '待确认',
    confirmed: '已确认',
    producing: '生产中',
    shipped: '已发货',
    completed: '已完成'
  }
  return map[status] || status
}

const handleSearch = () => {
  ElMessage.success('查询成功')
}

const handleReset = () => {
  Object.assign(filterForm, {
    orderNo: '',
    supplier: '',
    status: ''
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

const createPurchase = () => {
  ElMessage.success('新建采购订单功能开发中')
}

const batchImport = () => {
  ElMessage.success('批量导入功能开发中')
}

const viewDetail = (row) => {
  ElMessage.info(`查看订单详情: ${row.orderNo}`)
}

const confirmOrder = (row) => {
  ElMessageBox.confirm('确定要确认此采购订单吗？', '确认订单', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('订单已确认')
  }).catch(() => {})
}

const trackOrder = (row) => {
  ElMessage.info(`跟踪订单: ${row.orderNo}`)
}

const printOrder = (row) => {
  ElMessage.success(`打印订单: ${row.orderNo}`)
}
</script>

<style scoped>
.procurement-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.filter-bar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

